{% extends 'customer_dashboard.html' %}

{% block content %}
<div class="card">
  <h2>交易中心</h2>

  <div class="tab-nav">
    <button class="tab-btn active" onclick="showTab('deposit')">💰 存款</button>
    <button class="tab-btn" onclick="showTab('withdraw')">💸 取款</button>
    <button class="tab-btn" onclick="showTab('transfer')">🔄 转账</button>
  </div>

  <div class="tab-content">
    <iframe id="deposit" class="tab-panel active" src="{{ url_for('customer.deposit') }}"></iframe>
    <iframe id="withdraw" class="tab-panel" src="{{ url_for('customer.withdraw') }}"></iframe>
    <iframe id="transfer" class="tab-panel" src="{{ url_for('customer.transfer') }}"></iframe>
  </div>
</div>

<style>
.tab-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  background-color: #e4efff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}

.tab-btn.active {
  background-color: #4a90e2;
  color: white;
}

.tab-panel {
  display: none;
  width: 100%;
  height: 520px;
  border: none;
  border-radius: 10px;
  background-color: #f5faff;
}

.tab-panel.active {
  display: block;
}
</style>

<script>
function showTab(id) {
  const tabs = document.querySelectorAll('.tab-panel');
  const buttons = document.querySelectorAll('.tab-btn');

  tabs.forEach(t => t.classList.remove('active'));
  buttons.forEach(b => b.classList.remove('active'));

  document.getElementById(id).classList.add('active');
  event.target.classList.add('active');
}
</script>
{% endblock %}
